<template>
    <div class="View"> 
        <div class="publshBox"> 
        <!-- 商品信息描述 -->
        <div class="Box" v-show="PageNum==1">
            <div class="BoxHeader">
                <el-icon size="20" @click="router.back()"><ArrowLeftBold /></el-icon>
            </div>
            <el-input placeholder="请输入标题" class="title" v-model="title"></el-input>
            <el-input type="textarea"  placeholder="请输入租品信息" v-model="content">
            </el-input>
            <van-uploader v-model="fileList" multiple :max-count="3" :after-read="afterRead" class="add" preview-size="1rem"/>
        </div>
        <!-- 价格设置  -->
        <div class="Box" v-show="PageNum==2">
            <div class="BoxHeader" @click="setPageNum(1)">
                <el-icon size="20" ><ArrowLeftBold /></el-icon>
            </div>
            <div class="priceBox">
                <div class="priceLine">
                    <i class="iconfont icon-jiage"></i>
                    <el-input v-model.number="priceDay" ></el-input>
                    <span>/日</span>
                </div>
                <div class="priceLine">
                    <i class="iconfont icon-jiage"></i>
                    <el-input v-model="priceMonth" ></el-input>
                    <span>/月</span>
                </div>
            </div>
            <div class="confirm" @click="setPageNum(1)">
                <i class="iconfont icon-duigou_kuai"></i>
            </div>
        </div>
        <!-- 地址搜索  -->
        <div class="Box" v-show="PageNum==3">
            <div class="BoxHeader" @click="setPageNum(1)">
                <el-icon size="20" ><ArrowLeftBold /></el-icon>
            </div>
            <div class="searchBox">
                <van-area 
                    title="请选择省市区" 
                    :area-list="areaList" 
                    v-model="pos"
                    @confirm="confirmPos"
                    @cancel="pos='110101'"
                />
            </div>
            <el-input placeholder="请输入区内详细地址" class="detailPos" v-model="detailedAddress"></el-input>
        </div>
        <!-- 标签选择 -->
        <div class="Box " v-show="PageNum==4">
            <div class="BoxHeader" @click="setPageNum(1)">
                <el-icon size="20" ><ArrowLeftBold /></el-icon>
            </div>
            <div class="tagName">
                <span style="padding-left:2px">分类</span>
                <span style="padding-right:2px">活动</span>
            </div>
            <div class="chooseBox">
                <ChooseList></ChooseList>
                <TagList></TagList>
            </div>
            <div class="confirm" @click="confirmTag()">
                <i class="iconfont icon-duigou_kuai"></i>
            </div>
        </div>
        <!-- 列表选择 -->
        <ul>
            <li>
                <div class="left">
                    <i class="iconfont icon-jiage"></i>
                    <span>价格</span>
                </div>
                <div class="right" @click="setPageNum(2)">
                    
                    <span>￥{{priceDay}}</span>
                    <el-icon ><ArrowRightBold/></el-icon>
                </div>
            </li>
            <li>
                <div class="left">
                    <i class="iconfont icon-position"></i>
                    <span>位置</span>
                </div>
                <el-icon @click="setPageNum(3)"><ArrowRightBold /></el-icon>
            </li>
            <li>
                <div class="left">
                    <i class="iconfont icon-biaoqian"></i>
                    <span>标签</span>
                </div>
                <el-icon @click="setPageNum(4)"><ArrowRightBold /></el-icon>
            </li>
            <li>
                <div class="left">
                    <i class="iconfont icon-ai39"></i>
                    <span>接受拼租</span>
                </div>
                <el-switch v-model="acceptVal" style="--el-switch-on-color: #13ce66; "/>
            </li>
        </ul>
        <el-button @click="publish()"><i class="iconfont icon-zhifeiji"></i></el-button>
    </div>
    <CommonNav></CommonNav>
    </div>
</template>

<script setup>
import { areaList } from '@vant/area-data'//导入地区数据
import ChooseList from '@/components/publish/ChooseList.vue'
import TagList from '@/components/publish/TagList.vue'
import CommonNav from '@/components/CommonNav.vue'
import { showSuccessToast } from 'vant';
import {reactive, ref} from 'vue'
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'
const store = useStore();
const router = useRouter();
let pos=ref("110101")//地址key码
let title =ref("")//标题
let content =ref("")//具体描述
let priceMonth =ref(0)//月价格
let priceDay =ref(0)//日价
let acceptVal =ref(false)//是否拼租
let province=ref("")//省
let city=ref("")//市
let county=ref("")//镇
let tags=reactive([])//标签
let fileList = ref([])
let PageNum=ref(1)//页面
let detailedAddress=ref("")//具体地址

// 初始化函数
const init=()=>{
    priceDay.value=0,
    priceMonth.value=0,
    title.value="",
    content.value="",
    province.value="",
    city.value="",
    county.value="",
    acceptVal.value=false,
    detailedAddress.value="",
    tags.splice(0,tags.length),
    fileList.value=[]
}
//发布函数
const publish = ()=>{
    let flag=0
    if(acceptVal) flag=1
    let tagStr=""
    for( let i = 0;i < tags.length;i++){
        if(i==0){
            tagStr+=tags[i]
        }
        else tagStr=tagStr+","+tags[i]
    }
    let goods={
        priceDay:priceDay.value,
        priceMonth:priceMonth.value,
        title:title.value,
        content:content.value,
        province:province.value,//省
        city:city.value,//市
        county:county.value,
        detailedAddress:detailedAddress.value,
        shareBool:flag,
        merchantId:store.state.user.userData.id,
        phone:store.state.user.userData.phone,
        tags:tagStr,
        //没用到但是不添加后端会报错
        goodsImages:"",
        goodsName:"",
        labels:"",
        contentImages:"",
        realName:"",
        district:"",
    }
    console.log(goods);
    store.dispatch('publish/addGoods',goods).then(res=>{
        console.log(res);
        showSuccessToast('发布成功');
        init()
        router.push('/home')
    })
}

const afterRead = (file) => {
    file.status = 'uploading';
    file.message = '上传中...';

    setTimeout(() => {
        file.status = '';
    }, 1000);
};
//设置当前页面
const setPageNum = (val)=>{
    PageNum.value = val
}
//设置地址
const confirmPos=(e)=>{
    let arr,SelectProvinceName,SelectCityName,SelectCountyName;
    arr = e.selectedOptions;
    console.log(arr);
    SelectProvinceName = arr[0].text;   // 省
    SelectCityName = arr[1].text;   // 市
    SelectCountyName = arr[2].text;  // 区
    province.value=SelectProvinceName
    city.value = SelectCityName;
    county.value = SelectCountyName;
    if(detailedAddress.value==''){
        alert("未输入区内详细地址")
    }
    else setPageNum(1)
}
//设置标签
const confirmTag=(e)=>{
    var lis=document.getElementsByClassName('active')//获取选中标签
    tags.push(lis[0].innerHTML,lis[1].innerHTML)
    console.log(tags);
    // setPageNum(1)//回到初始页
}
</script>

<style lang="scss" scoped>
.View{
    transition: none;
    width: 100%;
    height: 9.27rem;
    overflow: hidden;
}
.publshBox{
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 8.62rem;
    background-color: #6FA11E;
    box-sizing: border-box;
    .Box{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 80%;
        height: 4.8rem;
        background-color: #fff;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        .BoxHeader{
            width: 110%;
            height: 15%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 999;
            .el-icon{
                width: 0.25rem;
                height: 0.25rem;
                color: #8BCE1F;
            }
            i{
                color: #8BCE1F;
                font-size: 0.25rem;
                font-weight: bold;
            }
        }
        
        .el-textarea{
            height: 1.2rem;
            margin-top: 0.1rem;
            ::v-deep .el-textarea__inner{
                padding: 0px;
                resize:none;
                box-shadow: none;
            }
        }
        .add{
            width: 100%;
            height: 1.1rem;
            align-self: flex-start;
            display: flex;
            align-items: center;
            border-radius: 0.2rem;
            margin-top: 0.2rem;
        }
        .priceBox{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            width: 110%;
            height: 2.5rem;
            margin-top: 0.15rem;
            .priceLine{
                display: flex;
                justify-content: space-around;
                align-items: center;
                width: 100%;
                height: 0.6rem;
                background: rgba(139,206,31,0.15) !important;
                border-radius: 0.2rem;
                margin: 0rem 0.15rem;
                i{
                    font-size: 0.4rem;
                    color: #6FA11E;
                }
                .el-input{
                    width: 60%;
                    height: 0.45rem;
                    font-size: 0.4rem;
                    background-color: transparent !important;
                }
                
                span{
                    font-size: 0.4rem;
                    color: #4B7A02;
                }
            }       
        }
        .searchBox{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            width: 120%;
            height: 3rem;
            margin-bottom: 0.3rem;
        }
        .tagName{
            
            position: absolute;
            top:0.3rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 0 0.65rem 0 0.65rem;
            align-items: center;
            width: 80%;
            height: 0.4rem;
            font-size: 0.3rem;
            font-weight: bold;
            color: rgb(75,122,2);
            z-index: 100;
            overflow: hidden;
        }
        .chooseBox{
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 100%;
            height: 3.8rem;

        }
    }
    ul{
        width: 80%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin-top:20px;
        li{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.2rem 0px;
            font-size: 0.2rem;
            .left{
                display: flex;
                align-items: center;
                i{
                    color: #fff;
                    font-size: 0.2rem;
                    margin-right: 0.1rem;
                }
                span{
                    color: #fff;
                }
                
            }
            .right{
                display: flex;
                align-items: center;
                color: #F0BF2D;
                .el-icon{
                    width: 20px;
                    height: 20px;
                    color: #fff;
                }
            }
            .el-icon{
                width: 20px;
                height: 20px;
                color: #fff;
            }
        }
    }

    .el-button{
        align-self: flex-end;
        width: 30%;
        height: 0.6rem;
        border-radius: 0.3rem;
        margin-right: 0.4rem;
        margin-top:0.1rem;
        i{
            color: #6FA11E;
            font-size: 0.4rem;
        }
     }  
    ::v-deep .el-input__wrapper{
        background: inherit;
        border: 0;
        box-shadow: 0 0 0 0px;
        .el-input__inner{
            text-align: center;
            color: #F0BF2D;
        }
    }  
}
.title{
    width: 100%;
    height: 0.5rem;
    font-size: 0.2rem;
    font-weight: bold;
    border-bottom: 1px solid #aaa;
    ::v-deep .el-input__wrapper{
        padding: 0px;
            .el-input__inner{
                text-align: left;
            }
        }  
}
.confirm{
    position:absolute;
    bottom: 0.4rem;
    right: 0.4rem;
    i{
        color: #F0BF2D;
        font-size: 0.4rem;
    }
}
.van-picker {
    width: 100%;
    .van-picker__toolbar{
        margin-bottom: 20px; 
        button{
            font-size: 20px;
        }
        :deep(.van-picker__title){
            font-size: 30px;
        }
    }
}
.detailPos{
    width: 120%;
    height: 0.5rem;
    font-size: 0.16rem;
    border: 1px solid #aaa;
    border-radius: 0.2rem;
    ::v-deep .el-input__wrapper{
            .el-input__inner{
                color: #333;
                text-align: left;
            }
        }  
}
:deep(.van-picker__toolbar){
    font-size: 20px;
    .van-picker__cancel, 
    .van-picker__confirm{
        font-size: 20px;
    }
}
:deep(.van-ellipsis){
    font-size: 20px;
}  
</style>